import styled from "styled-components";
import loginBg from "../../assets/img/loginimg.jpg";
import { type LoginWrapperProps } from "../LoginPage/type";
export const LoginWrapper = styled.div<LoginWrapperProps>/*css*/ `
  //   position: fixed;
  //   top: 0;
  //   left: 0;
  //   right: 0;
  //   bottom: 0;
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  user-select: none;
  display: flex;
  width: 100%;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url(${loginBg});
  background-color: #ecf0f3;
  color: #a0a5a8;
  .shell {
    display: flex;
    position: relative;
    width: 1000px;
    min-width: 1000px;
    height: 600px;
    min-height: 600px;
    background-color: #ecf0f3;
    box-shadow: 3px 3px 3px #d1d9e6;
    border-radius: 12px;
    overflow: hidden;
    transform: scale(0.7);
  }
  //   @media (max-width: 1200px) {
  //     .shell {
  //       transform: scale(0.7);
  //     }
  //   }

  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 600px;
    top: 0;
    height: 100%;
    padding: 25px;
    background-color: #ecf0f3;
    transition: all 0.6s ease-in-out;
    &.login-container {
      left: ${(props) => (props.isLogin ? "0" : "400px")};
      opacity: ${(props) => (props.isLogin ? "1" : "0")};
      z-index: ${(props) => (props.isLogin ? "1" : "0")};
    }

    &.create-container {
      left: ${(props) => (props.isLogin ? "400px" : "0")};
      opacity: ${(props) => (props.isLogin ? "0" : "1")};
      z-index: ${(props) => (props.isLogin ? "0" : "1")};
    }
  }
  .arco-form {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
  .iconfont {
    margin: 0 5px;
    border: rgba(0, 0, 0, 0.5) 1px solid;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    transition: 0.1s;
  }
  .iconfont:hover {
    opacity: 1;
    cursor: pointer;
  }
  .arco-form-item-control-wrapper {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .arco-row-justify-start {
    justify-content: center;
  }
  .arco-col-19 {
    display: block;
    margin: 10px 0 12px 0;
  }
  .arco-input-inner-wrapper .arco-input-group-suffix > svg {
    font-size: 22px;
    margin-right: 5px;
  }
  .arco-input {
    height: 50px;
  }
  .form-span {
    margin: 5px;
  }
  .form-title {
    margin: 5px;
    font-weight: 700;
    font-size: 30px;
    letter-spacing: 5px;
  }
  .submit-name {
    font-size: 15px;
    font-weight: 700;
    // color: #f9f9f9;
    // background-color: #4b70e2;
    letter-spacing: 1.3px;
  }
  .switch {
    display: flex;
    //控制元素内部的子元素排序
    justify-content: center;
    align-items: center;
    position: absolute;
    //脱离文档流控制父元素
    top: 0;
    // left: 0;
    right: 0;
    height: 100%;
    width: 400px;
    padding: 25px;
    overflow: hidden;
    transition: 1.25s;
    background-color: #ecf0f3;
    box-shadow: 4px 4px 10px #220b47ff;
    background: linear-gradient(to right, #ccd2e3ff, #e1dfebff);
  }

  .switch_container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    width: 400px;
    padding: 50px;
    transition: 1.25s;
    h2 {
      font-weight: 700;
      color: black;
      font-size: 30px;
    }
    &.login-switch {
      transform: translateX(${(props) => (props.isLogin ? "-100%" : "0")});
      opacity: ${(props) => (props.isLogin ? "0" : "1")};
    }
    &.create-switch {
      transform: translateX(${(props) => (props.isLogin ? "0" : "100%")});
      opacity: ${(props) => (props.isLogin ? "1" : "0")};
    }
  }
  .arco-checkbox-mask {
    width: 20px;
    height: 20px;
  }
  .switch-description {
    letter-spacing: 0.25px;
    line-height: 1.6;
    font-size: 14px;
    text-align: center;
    margin: 5px;
  }

  .arco-checkbox-checked .arco-checkbox-mask-icon {
    transform: scale(1.5);
    margin: 0 auto;
    transition: transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1);
  }
`;
